<template>
  <div class="home">
    <div class="shopcart">
      <h2>购物车</h2>
      <div class="goodlist">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-list @load="onLoad">
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

           <van-card
              v-for="(item,index) in list" :key="index"
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="item.goods_img"
              class="mycard"
            >
            
              <template #tags>
                <van-checkbox :name="index" :value="item.goods_id" class="mycheck" @click="checkAllButton"></van-checkbox>
                <!-- <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag> -->
              </template>
              <template #footer>
                <input type="button" class="reduce" value="-" @click="reduce(item,index)">
                <input type="text" class="num" :value="item.goods_count"/>
                <input type="button" class="add"  value="+" @click="add(item)">
              </template>
            </van-card>  

        </van-list>
        </van-checkbox-group>
      </div>
      <div class="bar">您的订单为虚拟订单（支付后不发货）, 请勿支付大额款项！</div>
      <div class="footer">
         <van-checkbox v-model="isCheckAll" @change="checkAll">我的全选</van-checkbox>
         <div class="total">合计：￥<span>{{total}}</span></div>
         <van-button round type="warning" class="mybutton" @click="toPay">&nbsp;&nbsp;支付&nbsp;&nbsp;</van-button>
      </div>
      <div>
        <van-popup v-model="show">
          <div class="msgOuter">
            <div>
              <h2>支付成功？</h2>
              <p>如果您已支付成功，请点击确定</p>
            </div>
            <div><van-button type="default" @click="cancel">取消</van-button><van-button type="default" @click="checkPayState">确定</van-button></div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import uri from '@/config/uri';
let moment = require("moment")
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
  
  name: 'Home',
  data() {
    return {
      list: [],  //保存所有的商品数据
      result: [],//保存所有被选中的按钮的序号
      isCheckAll: false,
      show: false,
      tmpTickit:''
    };
  },
  methods: {
    onLoad() {
      this.$http.get(uri.getdata).then((res)=>{
        this.list = res.cartInfo
      }).catch((err)=>{
        console.log("出错")
      })
    },
    cancel(){
      this.show = false
    },
    checkAll(){
      // console.log(this.isCheckAll)
      if(this.isCheckAll){
        this.$refs.checkboxGroup.toggleAll(true);
        // this.result = [0,1,2,3]
      }else{
        
        this.$refs.checkboxGroup.toggleAll();
      }
    },
    add(item){
      item.goods_count++
      // console.log()
    },
    reduce(item,index){
      if(item.goods_count==1){
         return false
      }else{
        item.goods_count --
      }

    },
    checkAllButton(){
      if(this.result.length == this.list.length){
        this.isCheckAll = true
      }else{
        this.isCheckAll = false
      }
    },
    randOrder(){
      return moment().format('YYYYMMDDhhmmss')+parseInt(Math.random()*1000000+1)
    },
    toPay(){
      // console.log(this.total)
      if(this.total!=0){
        const tp = this.randOrder()
        this.tmpTickit = tp
        var msg = 'https://m.28sjw.com/alipay_wap/alipayapi.php?WIDout_trade_no='+ tp + '&WIDsubject=Vue综合练习（宋子洋）&WIDtotal_fee='+this.total;
        window.open(msg)
        this.show = true;
      }else{
        confirm('商品为空')
      }
      
    },
    checkPayState(){
      this.$http.get(uri.check+"?_oid="+this.tmpTickit).then((res)=>{
        let state = res.data.order_status
        console.log(state)
        if(state!=0){
          Toast('支付成功')
        }else{
          Toast('支付失败')
        }
      }).catch((err)=>{
        // Toast('出错')
      })
      this.show = false
    }
  },
  computed:{
    // this.result保留的是选中序列的下标
    total(){
      // 啊我死了，还是原生把
      // var checkList = document.getElementsByClassName('mycheck')
      // let count = 0;
      // for(let i=0;i<checkList.length;i++){
      //   if(checkList[i].checked){
      //   }
      // }
      let sum = 0;
      this.list.forEach((ele,index) => {
        if(this.result.includes(index)){
          sum += ele.goods_count*ele.goods_price
        }
      });
      return sum.toFixed(2)
    }
  }
}
</script>
<style scoped> 
h2{
  line-height: 60px;
  text-align: center;
  font-weight: normal;
}
.mycheck{
  position: absolute;
  left: -130px;
  top: 0;
  bottom: 0;
}
.van-image{
  margin-left: 30px;
}
.van-card__content{
  margin-left: 30px;
}
.bar{
 background-color: orange;
 text-align: center; 
 line-height: 30px;
}
.footer{
  /* background-color: antiquewhite; */
  line-height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mybutton{
  padding: 0 40px;
    background-color: red;
}
input{
  display: inline-block;
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  outline: none;
  text-align: center;
}
.msgOuter{
  display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    width: 200px;
}
</style>
